<template>
<div class="rx-mobile-style">
    <a-collapse v-model="activeKey" :expand-icon-position="'right'">
        <a-collapse-panel key="1" :header="i18n('list.temStyle','列表模板风格')" >
            <div class="rx-card-container">
                <div class="rx-card-item" :class="{'active':activeItem == 1}" @click="handleActive(1)">
                    <div class="rx-card-item-center">
                        <div class="rx-card-item-imgbox">
                            <my-icon style="font-size: 56px;color: #d5ddff;" :type="'iconimage-fill'"></my-icon>
                        </div>
                        <div class="rx-card-item-content">
                            <ul class="item-list-top">
                                <li class="list-top-main">{{i18n('list.mainDisplay','主显示')}}</li>
                                <li class="list-top-less-main fontColor">{{i18n('list.secondary','次主显示')}}</li>
                            </ul>
                            <ul class="item-list-center">
                                <li>{{i18n('list.displayVal','副显示值')}}</li>
                                <li>{{i18n('list.displayVal','副显示值')}}</li>
                            </ul>
                            <ul class="item-list-bottom">
                                <li>{{i18n('list.labelOne','标签一')}}</li>
                                <li>{{i18n('list.labelTwo','标签二')}}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="rx-card-item-toolbar">
                        <div class="item-toolbar fontColor"><span>{{i18n('list.mainAction','主操作')}}</span></div>
                        <div class="item-toolbar"><span>{{i18n('list.secondAction','次操作')}}</span></div>
                        <div class="item-toolbar"><span>{{$ti18('rxList.moreBtn','更多')}}</span></div>
                    </div>
                </div>
                <div class="rx-card-item " style="margin-right: 20px" :class="{'active':activeItem == 2}" @click="handleActive(2)">
                    <div class="rx-card-item-center">
                        <div class="rx-card-item-imgbox">
                            <my-icon style="font-size: 56px;color: #d5ddff;" :type="'iconimage-fill'"></my-icon>
                        </div>
                        <div class="rx-card-item-content rx-card-item-content-right">
                            <ul class="item-list-top">
                                <li class="list-top-main">{{i18n('list.fieldTitle','主显示字段标题')}}</li>
                            </ul>
                            <ul class="item-list-bottom item-list-bottom-right">
                                <li>{{i18n('list.labelOne','标签一')}}</li>
                                <li>{{i18n('list.labelTwo','标签二')}}</li>
                                <li>{{i18n('list.labelThree','标签三')}}</li>
                            </ul>
                            <ul class="item-list-center">
                                <li>{{i18n('list.subDisplay','副显示字段标题：副显示值')}}</li>
                            </ul>

                        </div>
                    </div>
                    <div class="rx-card-item-toolbar">
                        <div class="item-toolbar fontColor"><span>{{i18n('list.mainAction','主操作')}}</span></div>
                        <div class="item-toolbar"><span>{{i18n('list.secondAction','次操作')}}</span></div>
                        <div class="item-toolbar"><span>{{$ti18('rxList.moreBtn','更多')}}</span></div>
                    </div>
                </div>
                <div class="rx-card-item" :class="{'active':activeItem == 3}" @click="handleActive(3)">
                    <div>
                        <table class="rx-card-item-table">
                            <tr>
                                <th>{{i18n('list.headField','表头字段')}}</th>
                                <th>{{i18n('list.headField','表头字段')}}</th>
                                <th>{{i18n('list.headField','表头字段')}}</th>
                            </tr>
                            <tr v-for="i in 3">
                                <td>{{i18n('list.fieldVal','字段值')}}</td>
                                <td>{{i18n('list.fieldVal','字段值')}}</td>
                                <td>{{i18n('list.fieldVal','字段值')}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </a-collapse-panel>
    </a-collapse>
    <div class="rx-mobile-grid-box">
        <a-tabs default-active-key="1" >
            <a-tab-pane key="1" :tab="i18n('list.columnField','列头字段')">
                <div class="rx-mobile-grid-toolbar">
                    <a-button type="primary" @click="reloadColumns" style="margin-right: 10px;">{{i18n('list.loadField','加载字段')}}</a-button>
                    <a-button class="rx-mobile-button rx-modile-del" @click="remove">{{i18n('list.deleteLine','删除行')}}</a-button>
                    <a-button class="rx-mobile-button" @click="upRow">{{ i18n_('list.upward', '向上') }}</a-button>
                    <a-button class="rx-mobile-button" @click="downRow">{{ i18n_('list.down', '向下') }}</a-button>
                    <a-button class="rx-mobile-button" @click="topUp">{{ i18n_('list.topUp', '置顶') }}</a-button>
                    <a-button class="rx-mobile-button" @click="bottomUp">{{ i18n_('list.bottomUp', '置底') }}</a-button>
                </div>
                <div class="rx-mobile-grid-container">
                    <rx-grid
                        ref="rxTable"
                        :bordered="true"
                        :showColumnsMenu="true"
                        :dataSource="gridData"
                        :columns="columns"
                        :allowRowSelect="true"
                        :heightAuto="true"
                        :multiSelect="true"
                        :showPage="false"
                    >
                        <span slot="isWidth" slot-scope="{text,record,index}">
                            <a-input-number v-model="record.isWidth" :min="1"  />
                        </span>
                        <span slot="isShow" slot-scope="{text,record,index}">
                            <a-select style="width:100%;" v-model="record.isShow" :dropdownMatchSelectWidth="true" :options="isShowList" />
                        </span>
                    </rx-grid>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" :tab="i18n('list.tableStyle','表格风格')" force-render>
               <div class="rx-list-head">{{i18n('list.headStyle','表头风格')}}</div>
                <a-form style="width: 90%" layout="vertical">
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.bgColor','表头背景颜色')">
                                <a-input style="width: 100px" v-model="mobileStyleList.headBackground" type="color" placeholder="表头背景颜色"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.fontStyle','字体风格')">
                                <a-select v-model="mobileStyleList.headTypeface" >
                                    <a-select-option value="overstriking">
                                        {{i18n('list.bold','加粗')}}
                                    </a-select-option>
                                    <a-select-option value="normal">
                                        {{i18n('list.normal','正常')}}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.fontColor','字体颜色')">
                                <a-input style="width: 100px" type="color" v-model="mobileStyleList.headColor" :placeholder="i18n('list.fontColor','字体颜色')"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.fontSize','字体大小')" >
                                <a-input-number v-model="mobileStyleList.headFontSize"  :min="12" :max="20"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
                <div class="rx-list-head" style="margin-top: 0px">{{i18n('list.dataSet','数据列设置')}}</div>
                <a-form style="width: 90%" layout="vertical">
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.lineColor','分割线颜色')" >
                                <a-input style="width: 100px" v-model="mobileStyleList.cutOffRuleColor" type="color" :placeholder="i18n('list.lineColor','分割线颜色')"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.colDivider','列分割线')">
                                <a-switch v-model="mobileStyleList.cutOffRuleShow" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.fontColor','字体颜色')">
                                <a-input style="width: 100px" type="color" v-model="mobileStyleList.listColor" :placeholder="i18n('list.fontColor','字体颜色')"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.fontSize','字体大小')">
                                <a-input-number  :min="12" v-model="mobileStyleList.listFontSize" :max="20"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.broken','断句')">
                                <a-select v-model="mobileStyleList.listDiction">
                                    <a-select-option value="0">
                                        {{i18n('list.wrap','换行显示')}}
                                    </a-select-option>
                                    <a-select-option value="1">
                                        {{i18n('list.oneLine','一行显示')}}
                                    </a-select-option>
                                    <a-select-option value="2">
                                        {{i18n('list.twoLine','二行显示')}}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.alignMode','对齐方式')">
                                <a-select v-model="mobileStyleList.listAligning">
                                    <a-select-option value="left">
                                        {{i18n('list.left','左')}}
                                    </a-select-option>
                                    <a-select-option value="center">
                                        {{i18n('list.center','中')}}
                                    </a-select-option>
                                    <a-select-option value="right">
                                        {{i18n('list.right','右')}}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.zebraStripe','斑马纹')">
                                <a-switch v-model="mobileStyleList.listZebraShow" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.zebraColor','斑马纹颜色')">
                                <a-input style="width: 100px" type="color" v-model="mobileStyleList.listZebraColor" placeholder="斑马纹颜色"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item :label="i18n('list.pageOrNot','是否分页')">
                                <a-switch v-model="mobileStyleList.paging" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-tab-pane>
        </a-tabs>
    </div>
</div>
</template>

<script>
    import {RxGrid,Util} from "@lowcode/jpaas-common-lib"
    import FormBoListApi from "@/api/form/core/formBoList";
    import reloadColumnDialog from "@/views/modules/form/core/listLayout/reloadColumnDialog";

export default {
    name: "mobileStyle",
    components:{
        RxGrid
    },
    data(){
        return {
            vm: null,
            activeKey: 1,
            activeItem: 1,

            gridData: [],
            defaultList: {
                1: [
                    {value: 'mainShow', label: this.i18n('list.mainDisplay','主显示')},
                    {value: 'nextMainShow', label: this.i18n('list.secondary','次主显示')},
                    {value: 'subShowValue', label: this.i18n('list.displayVal','副显示值')},
                    {value: 'label', label: this.i18n('list.tagValue','标签值')},
                    {value: 'image', label: this.i18n('list.image','图片')}
                ],
                2: [
                    {value: 'mainShow', label: this.i18n('list.mainDisplay','主显示')},
                    {value: 'status', label: this.i18n('list.statusVal','状态值')},
                    {value: 'subShowValue', label: this.i18n('list.displayVal','副显示值')},
                    {value: 'label', label: this.i18n('list.tagValue','标签值')},
                    {value: 'image', label: this.i18n('list.image','图片')}
                ]
            },
            columns:[
                {
                    title: this.i18n('list.fieldName','字段名称'),
                    dataIndex: 'header',
                    width:80
                },
                {
                    title: this.i18n('list.fieldKey','字段key'),
                    dataIndex: 'field',
                    width:120
                },
                {
                    title: this.i18n('list.width','宽度'),
                    dataIndex: 'isWidth',
                    width: 80,
                    scopedSlots: {customRender: 'isWidth'}
                },{
                    title: this.i18n('list.layoutMethod','排版方式'),
                    dataIndex: 'isShow',
                    width:60,
                    scopedSlots: {customRender: 'isShow'}
                }],


            isShowList: [],
            mobileStyleList: {
                headBackground:'#f8f8f8',//表头背景颜色
                headTypeface:'normal',//表头字体风格
                headColor:'#333333',//表头字体颜色
                headFontSize:13,//表头字体大小
                cutOffRuleColor:'#d9d9d9',//分割线的颜色
                cutOffRuleShow:true,//是否展示列分割线
                listColor:'#444444',//列表字体颜色
                listFontSize:12,//列表字体大小
                listDiction:'1',//短句几行显示
                listAligning:'center',//对齐方式
                listZebraShow:true,
                listZebraColor:'#f7f7f7',//斑马纹颜色
                paging:true,//是否分页
            },
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formEditMobile", key);
        },
        i18n_(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        setData(vm,data){
            this.vm=vm;
            //设置模板风格
            this.handleActive(data.mobileStyle || 1);
            //设置列头配置
            this.gridData.push(...(data.mobileCols || []));
            if(data.mobileStyleList){
                this.mobileStyleList = data.mobileStyleList
            }
        },
        getData(){
            let ary=this.$refs.rxTable.getData();
            if(this.isNotUnionShow(ary,'mainShow')){
                return {success:false,message:this.i18n('mainDis','主显示只能选择一个字段！')};
            }
            if(this.activeItem==1 && this.isNotUnionShow(ary,'nextMainShow')){
                return {success:false,message:this.i18n('secondDis','次主显示只能选择一个字段！')};
            }
            if(this.activeItem==2 && this.isNotUnionShow(ary,'status')){
                return {success:false,message:this.i18n('statusVal','状态值只能选择一个字段！')};
            }
            if(this.isNotUnionShow(ary,'image')){
                return {success:false,message:this.i18n('image','图片只能选择一个字段！')};
            }
            if(ary.length==0){
                let list=this.vm.getTable('columnConf').getData();
                this.loadGridData(list);
                ary=this.gridData;
            }
            return {success:true,data:{mobileStyle:this.activeItem,mobileCols:ary,mobileStyleList:this.mobileStyleList}};
        },
        isNotUnionShow(ary,isShow){
            return ary.filter(item=>{
                return item.isShow==isShow
            }).length>1;
        },
        handleActive(index){
            this.activeItem = index ;
            this.isShowList=this.defaultList[index];
            this.$emit("activeChange",index);
        },
        reloadColumns() {
            let self = this;
            FormBoListApi.reloadColumns(this.vm.pkId,false).then(res => {
                var reloadFields = res.data;
                var conf = {
                    component: reloadColumnDialog,
                    title: '重新加载表头',
                    curVm: this,
                    data: {reloadFields: reloadFields},
                    widthHeight: ['800px', '600px']
                };
                Util.open(conf, function (action,data) {
                    if (action != 'ok') {
                        return;
                    }
                    self.loadGridData(data)

                });
            });
        },
        loadGridData(ary){
            var fieldAry=this.gridData.map(item=>{
                return item.field;
            })
            this.gridData=[...this.gridData,...ary.filter(item=>{
                return !fieldAry.includes(item.field);
            }).map(item=>{
                return {field:item.field,header:item.header,i18nJson:item.i18nJson,isShow:"subShowValue",isWidth:100};
            })];
        },
        remove(){
            let table = this.$refs.rxTable ;
            let _selectedRowKeys = table.selectedRowKeys ;
            if(_selectedRowKeys.length == 0){
                this.$message.warning(this.i18n('msg.selectDelete','请至少选中一项删除'));
                return ;
            }
            table.removeRows();
            table.selectedRowKeys=[];
            table.selectedRows=[];
        },
        upRow() {
            this.$refs.rxTable.moveUp();
        },
        downRow() {
            this.$refs.rxTable.moveDown();
        },
        topUp(){
            this.$refs.rxTable.moveTopUp();
        },
        bottomUp(){
            this.$refs.rxTable.moveBottomUp();
        },
    }
}
</script>

<style scoped>
.rx-list-head{
    font-weight: bold;
    margin-top: 20px;
    font-size: 14px;
    margin-left: 5px;
}
.rx-card-item-table {
    width: 100%;
}
.rx-card-item-table tr{
    text-align: center;
}
.rx-card-item-table tr th{
    border: 1px solid #e5e5e5;
    height: 43px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rx-card-item-table tr td{
    height: 35px;
    border: 1px solid #e5e3e3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rx-mobile-grid-toolbar{
    padding: 10px 0;
    margin-top: 20px;
}
.rx-mobile-grid-toolbar .rx-mobile-button{
    background-color: #f5f7fa;
    margin-right: 10px;
}
.rx-mobile-grid-toolbar .rx-mobile-button:focus,
.rx-mobile-grid-toolbar .rx-mobile-button:active{
    border-color: #d9d9d9;
    color: rgba(0,0,0,.65);
}
.rx-mobile-grid-toolbar .rx-modile-del:hover{
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
}
.rx-mobile-grid-box{
    margin-bottom: 40px;
}



.rx-card-container{
    display: flex;
    justify-content: space-between;
}
.rx-card-item{
    width: 33.3%;
    overflow: hidden;
    height: 151px;
    background-color: #ffffff;
    box-shadow: 0 0 6px 0 #ccd1dd;
    border-radius: 2px;
    border: solid 1px transparent;
    display: flex;
    flex-direction: column;
}
.rx-card-item-content-right{
    position: relative;
}
.rx-card-item-content-right:before{
    content: 'status';
    padding:2px 10px;
    background-color: #87d068;
    border-radius: 0px 2px 0px 12px;
    top: 0px;
    right: 12px;
    position: absolute;
    color: #fff;
}
.rx-card-item:first-child{
    margin-right: 20px;
}
.rx-card-item:hover,
.rx-card-item.active{
    border-color: #1890ff;
}
.rx-card-item.active{
    position: relative;
    z-index: 1;
}
.rx-card-item.active:before{
    content: '';
    border-top: 15px solid #2e86ff;
    border-right: 15px  solid #2e86ff;
    border-left:15px  solid transparent;
    border-bottom: 15px  solid transparent;
    top: -1px;
    right: -1px;
    position: absolute;
    z-index: 2;
}
.rx-card-item.active:after{
    content: '';
    display: inline-block;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    transform: rotate(-45deg);
}
/*.imgBox{
    display: inline-block;
    width: 60px;
    height: 46px;
    background-color: red;
    border-radius: 4px;
}*/
.rx-card-item-center{
    flex: 1;
    display: flex;
}
.rx-card-item-imgbox{
    padding:4px 10px 10px;
}
.rx-card-item-content{
    flex: 1;
    padding:10px 10px 0 4px;
}
.rx-card-item-toolbar{
    height: 40px;
    min-height: 40px;
    border-top: 1px solid #e4e7eb;
    display: flex;
    width: 100%;
}
.item-toolbar{
    flex: 1;
    height: 100%;
    border-right: 1px solid #e4e7eb;
    display: flex;
    justify-content: center;
    align-items: center;

}
.item-toolbar span{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0px 10px;
}
.item-toolbar:last-child{
    border-right: 0;
}
.fontColor{
    color: #2e86ff!important;
}

ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
.item-list-top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
}
.item-list-top .list-top-main{
    font-size: 16px;
    color: #333;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.list-top-less-main{
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.item-list-center,
.item-list-bottom{
    display: flex;
    font-size: 12px;
}
.item-list-bottom,
.item-list-center{
    padding-bottom: 10px;
}
.item-list-center li{
    position: relative;
    padding:0 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 58px;
    border-right: 1px solid transparent;
}
.item-list-center li:after{
    content: '';
    height: 12px;
    width: 1px;
    background-color: #e4e7eb;
    position: absolute;
    right: -1px;
    top: 3px;
}
.item-list-center li:first-child{
    padding-left: 0;
}
.item-list-center li:last-child{
    padding-right: 0;
}
.item-list-center li:last-child:after{
    content: '';
    display: none;
}
.item-list-bottom li{
    padding: 2px 6px;
    background-color: #f6f6f4;
    border-radius: 2px;
    margin-right: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 58px;
    overflow: hidden;
    border-right: 1px solid transparent;
}


</style>